<template>
  <el-card class="box-card">
    <div slot="header" style="display: flex; justify-content: space-between;align-items: center">
      <h3>添加汽车</h3>
    </div>
    <div>
      <el-form>
        <el-form-item label="汽车名称">
          <el-input v-model="car.carName" placeholder="输入汽车名称"/>
        </el-form-item>
        <el-form-item label="请求品牌">
          <el-select v-model="car.brand" placeholder="请选择品牌">
            <el-option v-for="item in brandArr" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="油耗">
          <el-input v-model="car.oilWear" placeholder="输入油耗"/>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="saveCar">添加</el-button>
    </div>
  </el-card>
</template>

<script>
import http from '../api/http.js'
export default {
  name: "SaveCarView",
  data() {
    return {
      brandArr:['奔驰','宝马','奥迪','法拉利','兰博基尼'],
      car: {
        carName: null,
        brand: null,
        oilWear: null,
        state: 0
      }
    }
  },
  methods: {
    saveCar() {
      http.post('/car/save', this.car ).then((response) => {
          if( response.data == 'success') {
            this.$message.success('添加成功!')
            this.$router.push('/car')
          }
        })
    }
  }
}
</script>

<style scoped>

</style>